<template>
  <div
    style="
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      display: flex;
    "
  >
    <div
      style="
        width: 200px;
        padding-left: 30px;
        font-weight: bold;
        color: deepskyblue;
      "
    >
      后台管理
    </div>
    <div style="flex: 1">主页面</div>
    <div style="width: 100px">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link" v-text="username">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="personInfo">个人信息</el-dropdown-item>
          <el-dropdown-item command="logout">注销登陆</el-dropdown-item>
<!--          <el-dropdown-item command="wstest">ws测试</el-dropdown-item>-->
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- 个人信息编辑弹窗 -->
    <el-dialog title="个人信息" :visible.sync="personFormVisible">
      <el-form
        :model="personForm"
        status-icon
        ref="personForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- prop 要和v-model 的属性一样，不然重置的时候回没有重置到 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="personForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="personForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="personForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="功能权限" prop="role">
          <el-input v-model="personForm.role" disabled = true></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('editForm')"
            >提交</el-button
          >
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import request from "../utils/request";
import user from "../views/User";
export default {
  name: "Header",
  data() {
    return {
      username: "",
      personFormVisible: false,
      personForm: {
          username: '',
          password: '',
          checkPass: '',
          role: ''
      },
      socket: null,
      stompClient: null,
      name: 'admin',
      mes: '',
      cmes: '',
    };
  },
  created() {
    // console.log("uuuu=>", this.$store.state.loginModule.currentUser.username);

    if(this.$store.state.loginModule.currentUser.username){
      this.username = this.$store.state.loginModule.currentUser.username;
    }else if(window.sessionStorage.getItem('user')){
      let user = window.sessionStorage.getItem('user')
      this.username = JSON.parse(user).username
    }

  },
  mounted() {
    // this.init();
  },
  methods: {
    // send() {
    //   //这是发送消息
    //   let msg = {
    //     to: 'user2',
    //     from: 'admin',
    //     content: 'asdfgaqerhgsdffhgethg'
    //   }
    //   this.stompClient.send("/mes", {}, JSON.stringify(msg))
    // },
    handleCommand(command) {
      if (command == "logout") {
        request.post("/logout").then((res) => {
          if (res.success) {
            this.$router.push("/login"); //todo 后端注销还需优化
            this.$message.success(res.message);
            window.sessionStorage.removeItem("user")
          }
        });
      } else if (command == "personInfo") {
        // 获取登陆用户的信息（用户名、密码、角色）
        console.log("当前用户=》", this.$store.state.loginModule.currentUser);
        var a = new Promise((resolve,reject)=>{
            var roles = "";
            for (const item of this.$store.state.loginModule.currentUser
              .authorities) {
              roles += item.authority + ",";
            }
            // var role = roles.slice(5, roles.length - 1);
            request.get("/menu/translate/" + roles).then(res=>{

              var tempForm = {
                username: this.$store.state.loginModule.currentUser.username,
                role: res.result
              }
              resolve(tempForm)
            })
        })
        a.then((tempForm)=>{
            this.personForm = tempForm
            this.personFormVisible = true;
        })
      }else if(command == "wstest"){
        this.send()
      }
    },
    translateRole(roles){

    },
    submitForm() {
      // 向后端发送数据，更新用户
      request
        .post("user/edit", {
          username: this.personForm.username,
          password: this.personForm.password,
          role: this.personForm.role,
        })
        .then((res) => {
          if (res.success) {
            this.personFormVisible = false;
            this.$message.success(res.message);
            // this.load();
          }
        });
    },
    resetForm() {
      // console.log(this.$refs[formName])
      // console.log("sssssss=>", this.$refs["personForm"]);
      this.$refs["personForm"].resetFields();
    },
  },
};
</script>

<style scoped>
</style>